Day 3 的作業有沒有寫呢各位？
如果昨天有練習的話，應該覺得不會太難吧！
我們今天會用一樣的方式來介紹 + 練習，
今天的也不難哦～是做方塊的各種樣式變化
那麼，就開始囉！
材料首先，是材料。
「今天 DIY 課程的材料有：砂糖一匙、蛋兩顆、麵粉半包 ...」
不對啦，今天做的是方塊，材料怎麼是這些！
明明就是這個～
<div>
兔兔方塊
</div>
齁對啦，剛剛拿到食譜了啦。
沒錯，其實材料很簡單，
就是我們最常使用的、標榜無色無味不太佔空間的 <div> 標籤。
材料有了，接著快進到下一步吧！
背景色彩 (bg-color)藉由 bg-{顏色}-{深淺度} 這個功能，我們可以設定 / 改變區塊的背景顏色，例如 bg-black 功能是將背景設定為黑色。
其實，Tailwind 所定義出來的顏色都是共用的，你可以自己新增顏色。 所以只要你新增，就能夠把顏色用在所有可以用的地方。
以下是預設可以使用的背景色彩功能：
注意：還有些顏色不具深淺度，如白色 (
bg-white)、黑色 (bg-black)，透明 (bg-transparent)
在這邊我們把方塊的顏色設為漂亮的藍色 bg-blue-400，但是字看不清楚了，所以我們再加上個 text-white：
<div class="bg-blue-500 text-white">
兔兔方塊
</div>
太好了，總算先設計出第一步了！
我們加緊腳步。
寬度 (width)藉由 w-{寬度} 這個功能，我們可以設定 / 改變區塊寬度，例如 w-full 功能是將寬度設為 100%。
以下是預設可以使用的寬度功能：
接著我們把方塊的寬度設定為 w-40，也就是相當於 10rem，但是這次卻變成字沒有置中，我們快加上之前學過的文字置中 text-center 吧：
<div class="bg-blue-500 text-white w-40 text-center">
兔兔方塊
</div>
OK，妥妥的，這樣寬度就不會撐滿整個頁面了！
但看起來好像太扁了欸，我們來看還能調整什麼吧～
高度 (height)透過 h-{高度} 這個功能，我們可以設定 / 改變區塊的高度，例如 h-1/2 功能是將高度設為 1/2，也就等同於 50% 。
以下是預設可以使用的高度功能：
接著我們用 h-40 來增加高度，把方塊變成正方形：
<div class="bg-blue-500 text-white w-40 h-40 text-center">
兔兔方塊
</div>
完美～～這樣就是正方形了！
但是看他就只是個色塊，說實在好像稱不上是設計對吧？
那我們接著就需要這個啦 ...！
邊框寬度 (border-width)透過 border-{方向}-{邊框寬度} 這個功能，我們可以設定 / 改變邊框寬度，例如 border-t-4 功能是將上邊框寬度設定為 4px。
以下是預設可以使用的邊框寬度功能：
接著我們用 border-8 來增加一個寬度為 8px 的邊框：
<div class="bg-blue-500 text-white w-40 h-40 text-center border-8">
兔兔方塊
</div>
欸 ... 多啦 A 兔，那個邊框看起來很不明顯欸，
要怎麼辦啦！
沒關係，不要緊張。 一切都在掌控之中！
那我再拿出一個道具來吧！
邊框色彩 (border-color)透過 border-{色彩}-{深淺度} 這個功能，我們可以設定邊框的色彩，例如 border-pink-500 功能是將邊框色彩設定成粉色。 (#EC4899)
顏色呢，跟前面一樣，
以下是預設可以使用的邊框色彩功能：
注意：還有些顏色不具深淺度，如白色 (
border-white)、黑色 (border-black)，透明 (border-transparent)
接著我們用 border-blue-300 把邊框染上一個適合它的顏色：
<div class="bg-blue-500 text-white w-40 h-40 text-center border-8 border-blue-300">
兔兔方塊
</div>
其實顏色這種東西是隨你喜好，不過通常同個色系的設計上，顏色明度差兩階時看起來會比較順眼。以兔兔方塊為例，底色較深，邊框就調淺兩階；如果今天底色比較淺，就把邊框顏色調深兩階。
總覺得哪裡怪 ... 啊！我知道了！ 不夠圓！
四個邊角太尖了難怪不好看，應該要像小米的新 logo 一樣 ...
好啦沒有啦，人家的 logo 被嘴說改版後就像是只有上圓角而已。
但我們的確！缺的就是等一下要介紹的功能 ~ 圓角啦！
(但其實小米的新 logo 還是有他設計的巧思在，有興趣的人看完今天的文章後可以看一下延伸閱讀，我把連結放在最後面囉，去找吧～！)
圓角 (border-radius)透過 rounded-{方向}-{圓角程度} 這個功能，我們可以設定區塊的圓角程度，例如 rounded-r-xl 功能是把區塊右側的圓角程度設為 0.75rem。
以下預設是可以使用的方向：
以下是預設可以使用的圓角程度：
我們用 rounded-3xl 來把兔兔方塊變得圓潤一點吧：
<div class="bg-blue-500 text-white w-40 h-40 text-center border-8 border-blue-300 rounded-3xl">
兔兔方塊
</div>
哇！這樣就全部完成了 ... 嗎 ...
兔慣老闆覺得這樣太單調了沒有質感啦 (哭
他說要變成 IG logo 的那種感覺，
那不就要漸層了嗎 ... 可是我用 Tailwind ...
做起來也是很簡單啦！
背景圖片 (background-image)透過 bg-gradient-{漸層方向} 這個功能，我們可以設定背景圖片為漸層，且指定漸層的方向，例如 bg-gradient-to-r 功能是把背景漸層方向設為由左至右。
以下是預設可以使用的漸層方向功能：
我們這個只有設定漸層的方向，沒有設定顏色，所以等等要用這個搭配其它的功能一起使用！
漸層色標 (gradient-color-stops)透過 {標的}-{顏色}-{深淺度} 這個功能，我們可以設定漸層的顏色，需搭配背景圖片的漸層方向使用，例如 bg-gradient-to-r from-black 功能是把背景漸層方向設為由左邊的黑色，至右邊的透明。
以下是預設可以使用的標的功能：
顏色則是跟前面都一樣：
注意：還有些顏色不具深淺度，如白色 (
{from,via,to}-white)、黑色 ({from,via,to}-black)，透明 ({from,via,to}-transparent)
我們用 bg-gradient-to-tl、from-yellow-300、via-red-500 和 to-indigo-500 來把兔兔方塊變成像 IG logo 的顏色吧：
<div class="bg-gradient-to-tl from-yellow-300 via-red-500 to-indigo-500 text-white w-40 h-40 text-center border-8 border-blue-300 rounded-3xl">
兔兔方塊
</div>
哇！這次就真的全部完成了啦
一樣哦，上面所使用的這些功能還不是全部，
但是這些都是最常用的部份！
嘻嘻，今天就到這裡囉！
我一樣會把今天使用到的範例 div 和成品 playground 連結一起貼在下面，大家要記得做作業哦！
給你們的回家作業：不是我寫的延伸閱讀：你們不要再吵了啦！小米 200 萬做的新 Logo 已經很棒了啦！
關於兔兔們：
( # 兔兔小聲說 )
昨天的作業有做嗎？ 沒做也沒關係哦！
因為你明天要一次交兩份啦！
iThome鐵人賽
看影片追技術